<template>
  <div class="home">
    <div class="head">
      <div class="left">
        <span>广州</span>
        <i></i>
      </div>
      <router-link tag="div" to="/search" class="mid">
        <div>
          <span></span>
          <p>搜索产品</p>
        </div>
      </router-link>

      <div class="right">
        <div class="img">
          <van-button type="primary" @click="show = true" />
          <van-overlay :show="show" @click="show = false">
            <div class="wrapper">
              <div class="block">
                <ul>
                  <li>
                    <div class="img1"></div>
                    <div class="word">
                      <p>在线客服</p>
                      <span>09:00-21:00</span>
                    </div>
                  </li>
                  <li>
                    <div class="img2"></div>
                    <div class="word">
                      <p>电话客服</p>
                      <span>020-86338888(09:00-18:00)</span>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </van-overlay>
        </div>
      </div>
    </div>

    <!-- 轮播图 -->
    <div class="nav">
      <div class="img">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item
            ><img
              src="https://file.gzl.cn/group1/M00/4B/59/wKkBH2NbrFyAD0VWAADQckWicxM258.jpg"
              alt=""
          /></van-swipe-item>
          <van-swipe-item
            ><img
              src="https://file.gzl.cn/group1/M00/51/8F/wKkBHmNfr1eAQNN0AADA9kxZtGU209.jpg"
              alt=""
          /></van-swipe-item>
        </van-swipe>
      </div>
    </div>

    <div class="box">
      <router-link tag="div" :to="'/group?id='+item.id" class="item" v-for="item in travelList" :key="item.id">
        <div class="img">
          <img
            :src="item.img"
            alt=""
          />
        </div>
        <p>{{item.title}}</p>
      </router-link>
    </div>

    <div class="items">
      <div class="boxz">
        <div class="word" v-for="item in wordList" :key="item.id">
          <p>{{ item.title }}</p>
          <span>{{ item.word }}</span>
        </div>
      </div>
    </div>

    <div class="boz">
      <!-- <div class="color">
        <div class="left">
          <p>好货推荐</p>
        </div>
        <div class="right">
          <p>更多></p>
        </div>
      </div> -->
      <van-tabs v-model="active" background="#ffdede" >
        <van-tab title="好货推荐">
          <div class="boq">
            <div class="items">
              <router-link tag="div" :to="'/page?id='+item.id" class="item" v-for="item in specialList1" :key="item.id">
                <div class="img">
                  <img :src="item.img" alt="" />
                </div>
                <div class="content">
                  <p>{{item.title}}</p>
                  <span><i>￥</i>{{item.num}}</span>
                </div>
              </router-link>
            </div>
          </div>
        </van-tab>
        <van-tab title="酒店特惠">
          <div class="boq">
            <div class="items">
              <router-link tag="div" :to="'/page?id='+item.id" class="item" v-for="item in specialList2" :key="item.id">
                <div class="img">
                  <img :src="item.img" alt="" />
                </div>
                <div class="content">
                  <p>{{item.title}}</p>
                  <span><i>￥</i>{{item.num}}</span>
                </div>
              </router-link>
            </div>
          </div>
        </van-tab>
      </van-tabs>
    </div>

    <!-- <div class="boq">
      <div class="items">
        <div class="item">
          <div class="img">
            <img src="../assets/img/bg1.jpg" alt="" />
          </div>
          <div class="content">
            <p>台山2天＊广东小希腊＊住那琴半岛</p>
            <span><i>￥</i>499</span>
          </div>
        </div>
        <div class="item">
          <div class="img">
            <img src="../assets/img/bg1.jpg" alt="" />
          </div>
          <div class="content">
            <p>台山2天＊广东小希腊＊住那琴半岛</p>
            <span><i>￥</i>499</span>
          </div>
        </div>
      </div>
    </div> -->

    <div class="classify" >
      <van-tabs v-model="active1" background="#f5f5f5" color="#ffab00">
        <van-tab title="国内热卖">
          <div class="itemz">

            <router-link tag="div" :to="'/page?id='+item.id" class="item" v-for="item in classifyList1" :key="item.id">
            <div class="img">
              <img :src="item.img" alt="" />
            </div>
            <div class="word">
              <p>
                {{item.title}}
              </p>
              <span v-show="item.name">{{item.name}}</span>
            </div>
            <span><i>￥</i>{{item.num}}</span>
        </router-link>

      </div>
        </van-tab>
        <van-tab title="直通车">
          <div class="itemz">

             <router-link tag="div" :to="'/page?id='+item.id" class="item" v-for="item in classifyList2" :key="item.id">
            <div class="img">
              <img :src="item.img" alt="" />
            </div>
            <div class="word">
              <p>
                {{item.title}}
              </p>
              <span v-show="item.name">{{item.name}}</span>
            </div>
            <span><i>￥</i>{{item.num}}</span>
        </router-link>

      </div>
        </van-tab>
        <van-tab title="省内精选">
          <div class="itemz">

             <router-link tag="div" :to="'/page?id='+item.id" class="item" v-for="item in classifyList3" :key="item.id">
            <div class="img">
              <img :src="item.img" alt="" />
            </div>
            <div class="word">
              <p>
                {{item.title}}
              </p>
              <span v-show="item.name">{{item.name}}</span>
            </div>
            <span><i>￥</i>{{item.num}}</span>
        </router-link>

      </div>
        </van-tab>
        <van-tab title="热门酒店">
          <div class="itemz">

             <router-link tag="div" :to="'/page?id='+item.id" class="item" v-for="item in classifyList4" :key="item.id">
            <div class="img">
              <img :src="item.img" alt="" />
            </div>
            <div class="word">
              <p>
                {{item.title}}
              </p>
              <span v-show="item.name">{{item.name}}</span>
            </div>
            <span><i>￥</i>{{item.num}}</span>
        </router-link>

      </div>
        </van-tab>
      </van-tabs>

      <!-- <div class="itemz">
        <div class="item">
          <div class="img">
            <img src="../assets/img/bg2.jpg" alt="" />
          </div>
          <div class="word">
            <p>
              【爆款·尚·全景】呼伦贝尔、阿尔山、海拉尔直飞6天＊童话森秋＊阿尔山森林公园＊越野车进白狼峰＊额尔古纳湿地＊玫瑰峰日落＜升级豪华酒店，1晚俄式特色酒店，俄罗斯家庭餐，草原露营茶点，华俄后裔家访＞
            </p>
            <span>赏秋</span>
            <span>促销</span>
          </div>
          <span><i>￥</i>5199</span>
        </div>
        
      </div> -->

    </div>

    <div class="bottom">
      <div class="img">
        <img src="../assets/img/bottom.png" alt="" />
      </div>
      <div class="word">业务经营许可证号：L-GD-CJ00004</div>
    </div>

    <footer>
      <ul>
        <router-link tag="li" to="/home" class="con">
          <div class="img"></div>
          <p class="word">首页</p>
        </router-link>
        <router-link tag="li" to="/trip">
          <div class="img"></div>
          <p class="word">行程</p>
        </router-link>
        <router-link tag="li" to="/payment">
          <div class="img"></div>
          <p class="word">支付</p>
        </router-link>
        <router-link tag="li" to="/my">
          <div class="img"></div>
          <p class="word">我的</p>
        </router-link>
      </ul>
    </footer>
  </div>
</template>

<script>
import { getwordList,getspecialList1,getspecialList2,getclassifyList1,getclassifyList2,getclassifyList3,getclassifyList4} from "../assets/api/home";
export default {
  props:['CoList','travelList'],
  data() {
    return {
      wordList: null,
      specialList1:null,
      specialList2:null,
      classifyList1:null,
      classifyList2:null,
      classifyList3:null,
      classifyList4:null,
      // travelList:null,
      show: false,
      active: 0,
      active1:0,
    };
  },
  created() {
    getwordList().then((data) => {
      this.wordList = data.wordList;
    });
    getspecialList1().then((data) => {
      this.specialList1 = data.specialList1;
    });
    getspecialList2().then((data) => {
      this.specialList2 = data.specialList2;
    });
    getclassifyList1().then((data) => {
      this.classifyList1 = data.classifyList1;
    });
    getclassifyList2().then((data) => {
      this.classifyList2 = data.classifyList2;
    });
    getclassifyList3().then((data) => {
      this.classifyList3 = data.classifyList3;
    });
    getclassifyList4().then((data) => {
      this.classifyList4 = data.classifyList4;
    });
    // gettravelList().then((data) => {
    //   this.travelList = data.travelList;
    // });

  },
};
</script>

<style lang="scss" scoped>
.head {
  height: 44px;
  display: flex;
  line-height: 44px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  z-index: 999;
  .left {
    width: 17.2%;
    display: flex;
    align-items: center;
    padding-left: 16px;
    font-size: 15px;
    i {
      width: 10px;
      height: 10px;
      background: url(../assets/img/common.png) no-repeat -209px -159px;
      background-size: 400px;
      margin-left: 5px;
    }
  }
  .mid {
    display: flex;
    flex: 1;
    align-items: center;
    & > div {
      flex: 1;
      height: 28px;
      line-height: 28px;
      background: #fafafa;
      border-radius: 13px;
      display: flex;
      align-items: center;
      span {
        display: block;
        width: 20px;
        height: 20px;
        background: url(../assets/img/erji.png) no-repeat -39px -1px;
        background-size: 250px;
        margin-left: 13px;
      }
      p {
        color: #ccc;
        font-size: 14px;
      }
    }
  }
  .right {
    width: 6.2%;
    display: flex;
    align-items: center;
    margin-left: 17px;

    .img {
      width: 20px;
      height: 22px;
      background: url(../assets/img/erji.png) no-repeat 1px 0;
      background-size: 250px;
      ::v-deep .van-button--normal {
        padding: 0;
        background: #fff;
        border: 1px solid;
      }
      .wrapper {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
      }

      .block {
        width: 279px;
        height: 134px;
        border-radius: 8px;
        background-color: #fff;
        padding: 0 0 0 20px;
        ul {
          display: flex;
          flex-direction: column;
          li {
            padding: 16px 0;
            display: flex;
            height: 35px;
            width: 100%;
            border-bottom: 1px solid #ebebeb;
            align-items: center;
            &:last-child {
              border: none;
            }
            .img1 {
              width: 34px;
              height: 34px;
              margin-right: 10px;
              background: url(../assets/img/common.png) no-repeat -325px -546px;
              background-size: 400px;
            }
            .img2 {
              width: 34px;
              height: 34px;
              margin-right: 10px;
              background: url(../assets/img/common.png) no-repeat -367px -546px;
              background-size: 400px;
            }
            .word {
              p {
                height: 16px;
              }
              span {
                color: #999;
                font-size: 12px;
                transform: scale(0.8);
              }
            }
          }
        }
      }
    }
  }
}
.nav {
  height: 120px;
  width: 100%;
  margin: 55px auto 0 auto;
  box-sizing: border-box;
  padding: 0 16px;
  border-radius: 24px;
  overflow: hidden;
  .img {
    width: 100%;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.box {
  display: flex;
  justify-content: space-evenly;
  background: linear-gradient(#fff, #f5f5f5);
  height: 100px;
  align-items: center;
  .item {
    display: flex;
    flex-direction: column;
    align-items: center;
    .img {
      width: 44px;
      height: 44px;
      img {
        width: 100%;
      }
    }
    p {
      margin-top: 6px;
      font-size: 12px;
      color: #333;
    }
  }
}
.items {
  background: #f5f5f5;
  height: 138px;
  .boxz {
    width: 94%;
    margin: 0 auto;
    background: #fff;
    height: 125px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-radius: 10px;
    .word {
      display: flex;
      width: 25%;
      align-items: center;
      flex-direction: column;
      p {
        font-size: 14px;
        font-weight: 700;
      }
      span {
        color: #999;
        font-size: 12px;
        margin-top: 6px;
      }
    }
  }
}
.boz {
  background: #f5f5f5;
  padding: 0 13px;
  border-radius: 6px 6px 0 0;
  overflow: hidden;
  ::v-deep .van-tabs--line .van-tabs__wrap {
    border-radius: 6px 6px 0 0;
  }
  ::v-deep .van-tab--active {
    font-weight: bold;
    font-size: 20px;
  }
  .color {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    height: 47px;
    align-items: center;
    background: #fff;
    border-radius: 6px 6px 0 0;
    .left {
      width: 100px;
      height: 100%;
      font-size: 20px;
      font-weight: bold;
      color: #333;
      background: #ffdede;
      border-radius: 6px 0 0 0;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      &::after {
        content: "";
        position: absolute;
        top: -1px;
        left: 100%;
        width: 0;
        height: 0;
        border-bottom: 48px solid #ffdede;
        border-right: 28px solid transparent;
        margin-left: -2px;
      }
    }
    .right {
      color: #666;
      margin-right: 12px;
    }
  }
}
.boq {
  background: #f5f5f5;
  .items {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;
    background: linear-gradient(#ffdede, #fff);
    // height: 177px;
    border-radius: 0 0 6px 6px;
    padding: 12px 0;
  }
  .item {
    width: 45%;
    padding: 0 6px;
    // height: 177px;
    .img {
      width: 100%;
      // height: 110px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .content {
      padding: 4px;
      p {
        color: #333;
        font-size: 12px;
      }
      span {
        color: #f9355c;
        font-size: 16px;
        font-weight: bold;
        i {
          font-style: normal;
          font-size: 12px;
          font-weight: normal;
        }
      }
    }
  }
}
.classify {
  padding: 13px;
  background: #f5f5f5;
  ::v-deep .van-tab--active {
    font-weight: bold;
    font-size: 19px;
    color: #ffab00;
  }
  ul {
    display: flex;
    padding: 16px;
    align-items: center;
    background: #f5f5f5;
    justify-content: space-between;
    li {
      font-size: 14px;
      padding: 0 12px;
      &:first-child {
        padding-left: 0px;
      }
      &.con {
        font-size: 20px;
        color: #ffab00;
        position: relative;
        font-weight: 700;
        &::after {
          content: "";
          position: absolute;
          width: 20px;
          height: 3px;
          bottom: -8px;
          border-radius: 1.5px;
          background-color: #ffab00;
          display: block;
          left: 45%;
          margin-left: -10px;
        }
      }
    }
  }
  .itemz {
    display: flex;
    background: #f5f5f5;
    flex-wrap: wrap;
    justify-content: space-between;
    .item {
      width: 43%;
      margin: 6px 10px;
      background: #fff;
      border-radius: 6px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .img {
        width: 100%;
        img {
          width: 100%;
        }
      }
      .word {
        padding:3px 6px;
        p {
          overflow: hidden;
          height: 40px;
          text-overflow: ellipsis;
          -webkit-line-clamp: 2;
        }
        span {
          background: #f5f5f5;
          border-radius: 16px;
          font-size: 10px;
          padding: 2px 6px;
        }
      }
      & > span {
        font-size: 20px;
        font-weight: 700;
        color: #f9355c;
        i {
          font-size: 12px;
          font-weight: 400;
          font-style: normal;
        }
      }
    }
  }
}
.bottom {
  width: 100%;
  background: #f5f5f5;
  padding: 20px 0 70px;
  .img {
    width: 233px;
    height: 40px;
    margin: 0 auto;
    img {
      width: 100%;
    }
  }
  .word {
    text-align: center;
    color: #999;
    font-size: 10px;
  }
}
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #fff;
  ul {
    display: flex;
    li {
      width: 25%;
      display: flex;
      align-items: center;
      flex-direction: column;
      font-size: 12px;
      color: #707070;
      &.con {
        .word {
          color: #242424;
        }
      }
      .img {
        width: 26px;
        height: 26px;
        background: url(../assets/img/common.png) no-repeat -289px -877px;
        background-size: 400px;
      }
      &:nth-of-type(2) {
        .img {
          background-position: -257px -845px;
        }
      }
      &:nth-of-type(3) {
        .img {
          background-position: -319px -876px;
        }
      }
      &:nth-of-type(4) {
        .img {
          background-position: -318px -844px;
        }
      }
    }
  }
}
</style>
